<dev xmlns="http://www.w3.org/1999/xhtml"
     xmlns:ui="http://java.sun.com/jsf/facelets"
     xmlns:h="http://java.sun.com/jsf/html"
     xmlns:c="http://java.sun.com/jsp/jstl/core"
     xmlns:f="http://java.sun.com/jsf/core"
     xmlns:p="http://primefaces.org/ui">
    <c:set var="root" value="#{request.contextPath}" />

    <ui:composition template="../template/common.xhtml" >
        <ui:define name="topComponents">
            <c:set var="activeItem" value="productPage"/>
            <ui:include src="../navigator.xhtml" />
        </ui:define>
        <ui:define name="content">
            <div class="span4 ">
                <div class="well">
                    <h:form id="usersForm">
                        <p:dataTable var="pro" value="#{productBrowseCtrl.dataModel}" selectionMode="single" selection="#{productBrowseCtrl.selected}" paginator="true" rows="10" lazy="true"
                                     rowKey="#{pro.id}" paginatorTemplate=" {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink}" >


                            <p:ajax event="rowSelect" listener="#{productBrowseCtrl.onRowSelect}" update=":formImages:imageList, :formProperties"></p:ajax>

                            <f:facet name="header">
                                Products
                            </f:facet>
                            <p:column headerText="Id" sortBy="#{pro.id}" filterBy="#{pro.id}"  >
                                <h:outputText value="#{pro.id}" />
                            </p:column>
                            <p:column headerText="Name" sortBy="#{pro.name}" filterBy="#{pro.name}" >
                                <h:outputText value="#{pro.name}" />
                            </p:column>
                        </p:dataTable>
                        <p:commandButton value="Create" action="productCreatePage" />
                        <p:commandButton value="Edit" action="productEditPage"/>
                        <p:commandButton value="Delete" action="#{productBrowseCtrl.delete()}" ajax="false" />
                    </h:form>
                </div>

            </div>
            <div class="span8 well">
                <p:selectOneMenu value="#{categoryList.category}" >  
                    <f:ajax listener="#{categoryList.categoryChanged}" />
                    <f:selectItems value="#{categoryList.categories}" var="cate" itemValue="#{cate}" itemLabel="#{cate.name}" />
                </p:selectOneMenu>
                <p:selectOneMenu value="#{categoryList.type}"  immediate="true">    
                    <f:selectItems value="#{categoryList.types}" var="ty" itemValue="#{ty}" itemLabel="#{ty.name}" />
                </p:selectOneMenu> <br />
                <p:commandButton value="Update" />
            </div>
            <div class="span8 well">
                <h:form id="frmAddPro">
                    <h:outputLabel value="New property name: "/>
                    <p:autoComplete id="acpInfoType" value="#{propertyAddingCtrl.txtPropertyName}" completeMethod="#{propertyAddingCtrl.complete}" ></p:autoComplete>
                    <h:outputLabel value="Value: "/>
                    <p:inputText value="#{propertyAddingCtrl.propertyValue}"></p:inputText>
                    <br />
                    <p:commandButton value="Add" action="#{propertyAddingCtrl.create()}" update=":frmAddPro,:formProperties" ></p:commandButton>
                </h:form>
                <h:form id="formProperties">
                    <p:dataTable value="#{propertyCtrl.properties}" id="proList" var="d" editable="true" rowKey="#{d.propertyName}" selectionMode="single" selection="#{propertyCtrl.selected}">  
                        <f:facet name="header">
                            Properties Editing 
                        </f:facet>

                        <p:ajax event="rowEdit" listener="#{propertyCtrl.onEdit}" update=":formProperties:proList" />
                        <!--<p:ajax event="rowEditCancel" listener="#{propertyCtrl.onDelete}" update=":formProperties:proList" />--> 

                        <p:column headerText="Name" style="width:30%">
                            <h:outputText value="#{d.propertyName}" />
                        </p:column>
                        <p:column headerText="value" style="width:30%">
                            <p:cellEditor>
                                <f:facet name="output">
                                    <h:outputText value="#{d.value}" />
                                </f:facet>
                                <f:facet name="input">
                                    <h:inputText value="#{d.value}" style="width:90%"/>
                                </f:facet>
                            </p:cellEditor>
                        </p:column>
                        <p:column style="width:6%">
                            <p:rowEditor />
                        </p:column>
                    </p:dataTable>
                    <p:commandButton value="Delete selected" action="#{propertyCtrl.delete()}" update=":formProperties"></p:commandButton>
                </h:form>
            </div>
            <div class="span8 well">
                <h:form id="formImages">
                    <p:carousel id="imageList" value="#{productBrowseCtrl.productImages}" var="pImage" headerText="Product images">  
                        <p:graphicImage id="image" value="#{appConstrant.IMAGE_SERVER_PATH}#{pImage.imagePath}" width="150px;" height="100px;" style="height: 100px;" />   
                        <h:panelGrid columns="2" style="width:100%" cellpadding="5">  

                            <p:commandLink action="#{productBrowseCtrl.deleteImage()}" update=":formImages:imageList" title="Delete" >
                                <h:outputText styleClass="ui-icon ui-icon-trash" style="margin:0 auto;" />   
                                <f:setPropertyActionListener value="#{pImage}" target="#{productBrowseCtrl.selectedImage}"/>
                            </p:commandLink>
                        </h:panelGrid>  
                    </p:carousel>
                </h:form>
                <h:form id="formImageUpload" enctype="multipart/form-data">
                    <p:fileUpload fileUploadListener="#{imageUploadListener.handleFileUpload}"  
                                  mode="advanced"   
                                  sizeLimit="100000"   
                                  allowTypes="/(\.|\/)(gif|jpe?g|png)$/"
                                  update=":formImages:imageList"/>  
                    <p:growl id="upload_messages" />
                </h:form>

            </div>
            <div class="span8 well ">
                Prices 
                <h:form id="priceForm">
                    <p:commandButton value="Modify" action="#{productBrowseCtrl.gotoPriceBrowsePage()}" />
                </h:form>
            </div>
        </ui:define>
    </ui:composition>
</dev>